<template>
	<!-- 首页 -->
	<view class="home">
		<view class="top">
			<view class="avatarBox">
				<image @click="onChooseAvatar" class="avatar-wrapper"
					:src="userInfo.UserAvatarURL?userInfo.UserAvatarURL:userUrl" mode="aspectFit"></image>
				<view class="infoBox">
					<view class="user" @click="toEditUserInfo('用户名')">
						{{userInfo.Name}} <uni-icons type="forward"></uni-icons>
					</view>
					<view class="renzheng">
						<uni-tag :circle="true" text="实名认证" type="primary" size="mini" />
						<!-- <uni-tag :circle="true" text="商铺认证" type="default" size="mini" /> -->
					</view>
				</view>
				<view class="" style="flex: 1;text-align: right;">
					<!-- <view class="">
						总额度: 120000
					</view>
					<view class="">
						可用额度: 120000
					</view> -->
				</view>
			</view>
			<view class="statusNum">
				<view class="statusItem">
					<view class="num">
						{{headerData.MyMerchant}}
					</view>
					<view class="text">
						我的商户
					</view>
				</view>
				<view class="statusItem">
					<view class="num">
						{{$utils.momenyFormat(headerData.Accumulated)}}
					</view>
					<view class="text">
						累计交易
					</view>
				</view>
				<view class="statusItem">
					<view class="num">
						{{$utils.momenyFormat(headerData.Commission)}}
					</view>
					<view class="text">
						累计佣金
					</view>
				</view>
				<view class="statusItem">
					<view class="num">
						{{$utils.momenyFormat(headerData.Withdrawal)}}
					</view>
					<view class="text">
						可提余额
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<button type="primary" @click="topPageCustomer">添加客户</button>
			<button type="primary" @click="toPageUser">系统设置</button>
		</view>
		<view class="content">
			<view class="pay">
				<uni-icons type="wallet" color="#333" size="18" style="margin-right: 10px;"></uni-icons>
				最近交易
			</view>
			<scroll-view class="scroll" style="width: 100%;" scroll-y="true" :show-scrollbar="false"
				@scrolltolower="lower">
				<view class="merchant" v-for="item in bankListData" :key="item.Id" @click="toInfoPage(item)">
					<view class="bank">
						<text>{{item.BankName}}</text>
						<text>日期：{{item.CreditDate?item.CreditDate.substring(0,10):''}}</text>
					</view>
					<view class="flexBox">
						<view class="">
							提现金额:￥ {{$utils.momenyFormat(item.WithdrawalAmount)}}
						</view>
						<view class="">
							金额：￥{{$utils.momenyFormat(item.CreditAmount)}}
						</view>
					</view>
					<view class="">
						商户：{{item.CompanyName}}
					</view>
					<view class="">
						贷款方：{{item.BuerName}}
					</view>
					<uni-tag v-if="!item.State" text="可提现" type="success"></uni-tag>
					<uni-tag v-else text="已提现" type="default"></uni-tag>
				</view>
				<!-- 上拉显示更多 -->
				<view class="" style="padding-bottom: 50rpx;">
					<uniLoadMore :status="status" :contentText="contentText" :rows="bankListData"></uniLoadMore>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// 引入公共接口
	import {
		// 获取交易列表数据
		GetSellerOrderList,
		GetSellerHeader,
	} from '@/api/interface.js'
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				headerData: {},
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				show: false,
				mode: 'date',
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				Total: 0,
				bankListData: [],
				userUrl: 'https://hzq.yoojet.com/logo200.png',
				userInfo: {},
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/User/User'
			})
		},
		onShow() {
			this.bankListData = []
			this.userInfo = uni.getStorageSync('userInfo')
			this.pagination.PageIndex = 1
			// 获取首页列表数据
			this.getBankListData()
			GetSellerHeader({
				id: this.userInfo.Id
			}).then(res => {
				if (res.Success) {
					this.headerData = res.Data
				}
			})

		},
		// 下拉刷新
		onPullDownRefresh() {
			this.bankListData = []
			// 加载
			this.status = "loading"
			// 重置相关参数
			this.pagination.PageIndex = 1

			// 获取首页列表数据
			this.getBankListData()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// 跳转
		onNavigationBarButtonTap(e) {
			console.log('跳转了', e)
			this.$pageUrl('navigateTo', '/pages/User/User')
		},
		methods: {
			// 触底
			lower(e) {
				console.log('触底了')
				if (this.bankListData.length >= this.Total) {
					this.status = "noMore"
					return
				}
				this.getBankListData()
			},
			// 获取首页银行列表数据
			getBankListData() {
				this.status = "loading"
				GetSellerOrderList({
					...this.pagination,
					Search: {
						Keyword: this.userInfo.Id
					},
					SortField: "Id",
					SortType: "desc"
				}).then(res => {
					console.log('获取首页列表数据', res.Data)
					if (res.Success) {
						// 赋值总条数
						this.Total = res.Total
						if (res.Data.length == 0) {
							this.status = "noMore"
							return
						}
						if (this.pagination.PageIndex == 1) {
							this.bankListData = res.Data
							this.pagination.PageIndex += 1
						} else {
							this.bankListData = this.bankListData.concat(res.Data)
							this.pagination.PageIndex += 1

						}
						if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
							// 暂停加载  没有更多了
							this.status = "noMore"
							return
						}
					} else this.$api.msg(res.Msg)
				}).catch((err) => {
					uni.showToast({
						icon: 'none',
						title: res.Msg
					})
					this.status = "noMore"
				})
			},



			scanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			AgreementPage(item) {
				uni.setStorageSync('shopInfo', item)
				uni.navigateTo({
					url: '/pages/AgreementPage/AgreementPage'
				})
			},
			toInfoPage(item) {
				uni.navigateTo({
					url: '/pages/Order/OrderInfo'
				})
			},

			// 添加客户跳转
			topPageCustomer() {
				console.log('跳转')
				uni.navigateTo({
					url: '/pages/Information/page/Customer'
				})
				// this.$pageUrl('navigateTo','/pages/customer/customer')
				// this.$pageUrl('navigateTo','/pages/Information/Information')
			},
			// 系统设置跳转
			toPageUser() {
				let data = {
					id: 1,
					name: "ad",
					o: "1"
				}
				this.$pageUrl('navigateTo', '/pages/Information/Information', data)
			},
			// 用户头像
			onChooseAvatar(e) {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (rst) => {
						uni.navigateTo({
							url: '/pages/user/camera?path=' + encodeURIComponent(rst
								.tempFilePaths[0])
						})
					}
				});
			},
			// 修改个人信息
			toEditUserInfo(type) {
				let url = ''
				if (type == '用户名') url = `type=text&value=${this.userInfo.UserName||''}&key=UserName&title=用户名`
				else if (type == '手机号') url = `type=number&value=${this.userInfo.UserPhone||''}&key=UserPhone&title=手机号`
				else if (type == '公司') {
					if (this.userInfo.IsSubAccount) return this.$api.msg('暂无权限')
					let cId = this.CompanyInfo.Id ? this.CompanyInfo.Id : ''
					uni.navigateTo({
						url: '/pages/user/company?Id=' + cId
					})
					return
				}
				uni.navigateTo({
					url: '/pages/User/editUserInfo?' + url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.home {
		height: 100%;
		width: 100%;
		background-image: url(/static/background.png);
		background-size: cover;

		.top {
			background-color: rgba(255, 255, 255, .5);
			box-sizing: border-box;
			padding: 10px 0;

			.avatarBox {
				padding: 0 10px;
				display: flex;
				margin-bottom: 20rpx;

				.avatar-wrapper {
					background-color: transparent;
					width: 50px;
					height: 50px;
					padding: 0;
					border-radius: 5px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.infoBox {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 10px;
					font-size: 12px;

					.user {
						font-weight: 600;
						color: #333;
						font-size: 16px;
					}
				}

			}

			.renzheng {
				.uni-tag {
					margin-right: 10px;
				}
			}

			.statusNum {
				display: flex;
				text-align: center;

				.statusItem {
					margin-top: 10px;
					flex: 1;
					display: flex;
					flex-direction: column;

					.num {
						font-weight: 600;
					}
				}

			}
		}

		.btnBox {
			padding: 10px;
			display: flex;
			justify-content: space-between;

			button {
				width: 48%;
				margin: 0;
			}
		}

		.content {
			.scroll {
				// border:1px solid blue;
				// 兼容H5和APP
				/* #ifdef H5 */
				height: calc(100vh - 358px);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 235px);
				/* #endif */
			}

			.pay {
				color: #333;
				font-weight: bold;
				font-size: 16px;
				background: rgba(255, 255, 255, .3);
				margin: 10px;
				border-radius: 5px;
				padding: 5px 10px;
			}

			.flexBox {
				view {
					flex: 1;
				}
			}

			.merchant {
				background-color: rgba(255, 255, 255, .9);
				border-radius: 10px;
				box-shadow: 1px 1px 5px #ccc;
				box-sizing: border-box;
				padding: 20rpx;
				margin: 10px;
				font-size: 13px;
				position: relative;
				overflow: hidden;

				.uni-tag {
					position: absolute;
					right: 0;
					bottom: 0;
				}

				.bank {
					display: flex;
					justify-content: space-between;
					font-weight: bold;
				}
			}
		}

	}
</style>